<template>
  <div class="root-container">
    <div class="staff-container">
      <div
        v-for="(staff, staffIndex) in planningStore.confirmedStaffs"
        class="staff-item"
      >
        <div class="staff-item-name">{{ staff.name }}</div>
        <div class="staff-item-workingday-container">
          <div
            v-for="(workingDay, workingDayIndex) in staff.workingDays"
            class="staff-item-workingday"
          >
            <div class="workingday-date">{{ workingDay.date }}</div>
            <draggable
              class="workingday-task-area list-group"
              :list="workingDay.tasks"
              item-key="id"
              ghost-class="ghost"
              group="task"
              @change="handleDragChange"
            >
              <template #item="{ element }">
                <div class="list-group-item">
                  <span style="margin-right: 4px">{{ element.name }}</span>
                  <el-button
                    type="danger"
                    link
                    @click="
                      handleRemoveTask(staffIndex, workingDayIndex, element.id)
                    "
                  >
                    <el-icon><i-ep-circle-close-filled /></el-icon>
                  </el-button>
                </div>
              </template>
            </draggable>
          </div>
        </div>
      </div>
    </div>
    <div class="task-container">
      <draggable
        class="task-list list-group"
        :list="taskProfile"
        item-key="id"
        :group="{ name: 'task', pull: 'clone', put: false }"
        ghost-class="ghost"
        :sort="false"
        @change="handleDragChange"
      >
        <template #item="{ element }">
          <div class="list-group-item">
            {{ element.name }}
          </div>
        </template>
      </draggable>
    </div>
  </div>
</template>

<script setup>
import draggable from "vuedraggable";
import taskProfile from "@/profiles/tasks.json";
import usePlanningStore from "@/stores/planningStore.js";
const planningStore = usePlanningStore();

const handleDragChange = (e) => {
  // console.log("DragChange", e);
  planningStore.confirmedStaffs.forEach((staff) => {
    staff.workingDays.forEach((workingDay) => {
      workingDay.tasks = workingDay.tasks.filter(
        (item, index) =>
          workingDay.tasks.findIndex((i) => i.id === item.id) === index
      );
    });
  });
};

const handleRemoveTask = (staffIndex, workingDayIndex, taskId) => {
  planningStore.confirmedStaffs[staffIndex].workingDays[workingDayIndex].tasks =
    planningStore.confirmedStaffs[staffIndex].workingDays[
      workingDayIndex
    ].tasks.filter((task) => task.id !== taskId);
};
</script>

<style scoped>
.root-container {
  display: flex;
  gap: 16px;
  height: calc(100vh - 280px);
}

.staff-container,
.task-container {
  border: 1px solid #8888;
  border-radius: 8px;
  height: 100%;
  overflow: auto;
}

.staff-container > *,
.task-container > * {
  user-select: none;
}

.staff-container {
  flex: 3;
}
.task-container {
  flex: 1;
}

.staff-item {
  display: flex;
  flex-direction: row;
  /* padding: 0 8px; */
  width: 100%;
  border-top: 1px solid #8888;
}
.staff-item:last-child {
  border-bottom: 1px solid #8888;
}

.staff-item-name {
  font-size: 16px;
  font-weight: bold;
  color: var(--el-text-color-regular);
  width: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  border-right: 1px solid #8888;
}
.staff-item-workingday-container {
  width: 100%;
}
.staff-item-workingday {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  /* padding: 0 4px; */
  width: 100%;
  border-top: 1px solid #8888;
}
.staff-item-workingday:first-child {
  border: none;
}

.workingday-date {
  font-size: 14px;
  color: var(--el-text-color-regular);
  width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.workingday-task-area {
  border-left: 1px solid #8888;
  /* border-radius: 8px; */

  /* background: #8884; */
  min-height: 40px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  padding: 2px 4px;
}

.list-group-item {
  padding: 2px 4px 2px 8px;
  /* margin: 2px; */
  font-size: 14px;
  color: var(--el-text-color-regular);
  background: #8884;
  /* border: 1px solid #8888; */
  border-radius: 4px;
  cursor: pointer;
  width: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.task-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
}

.task-list > * {
  padding: 4px;
}
</style>
